﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery.floatingmessage.js</title>
<link rel="stylesheet" type="text/css" href="../jquery.ui/themes/redmond/jquery-ui.custom.css" />
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.ui/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="jquery.floatingmessage.js"></script>

</head>
<body style="height: 2000px;">
	<b style="font-size: 80px; position: absolute; top: 300px; left: 28%;">jquery.floatingmessage</b>
	<script type="text/javascript">
            $(document.body).ready(function(){
                //left-top
                $("<div>Normal</div>").floatingMessage();
                $("<div>Close event</div>").floatingMessage({
                    close : function(){window.alert("close event")}
                });
                $("<div>Not close</div>").floatingMessage({
                    click : false
                });
                $("<div>Overwrite click function</div>").floatingMessage({
                    click : function(){window.alert("clicked")}
                });
                
                //left-bottom
                $("<div>Left bottom</div>").floatingMessage({
                    position : "bottom-left"
                });
                $("<div>Left bottom - padding</div>").floatingMessage({
                    position : "bottom-left",
                    padding : 20
                });
                $("<div>Left bottom - Display 5sec</div>").floatingMessage({
                    position : "bottom-left",
                    time : 5000
                });
                
                //right-top
                $("<div>Right top</div>").floatingMessage({
                    position : "top-right"
                });
                $("<div>Change height </div>").floatingMessage({
                    position : "top-right",
                    height : 25
                });
                a = $.floatingMessage("Destroy method1",{
                    position : "top-right",
                    height : 25
                });
                setTimeout(function(){
                    a.floatingMessage("destroy");
                },3000);
                b = $("<div>Destroy method2</div>").floatingMessage({
                    position : "top-right",
                    height : 25
                });
                setTimeout(function(){
                    b.floatingMessage("destroy");
                },5000);
                
                //right-bottom
                $("<div>Right bottm</div>").floatingMessage({
                    position : "bottom-right"
                });
                $("<div>Change width</div>").floatingMessage({
                    position : "bottom-right",
                    width : 50
                });
                $("<div>Add class</div>").floatingMessage({
                    position : "bottom-right",
                    className : "ui-state-error"
                });

            });
        </script>
</body>
</html>
